<template>
  <div id="look">
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>

    <div style="margin-bottom: 10px">
      <img src="../../../static/img/look.png" style="width: 1200px"/>
    </div>
    <div style="overflow: auto;">
      <div style="overflow: hidden;">
        <div style="float: left;width: 25%">
          <img src="../../../static/img/lookleft.png" style="width: 100%"/>
        </div>
        <div style="float: right;width: 72%">
          <div class="tiezi" v-for="(article, index) in LookArticlesList.slice(0,2) ">
            <h2 @click="gotoarticle(article.aid)">{{article.title}}</h2>
            <p class="name" style="margin: 8px 0 13px;">
              <i class="iconfont icontouxiang"></i>&nbsp;{{article.specialist.specialistName}}&nbsp;&nbsp;分类：{{article.area.area}}&nbsp;&nbsp;发布时间：{{article.releaseDateStr}}
            </p>
            <p style="line-height: 1.5" @click="gotoarticle(article.aid)">{{article.description}}</p>
          </div>
        </div>
      </div>
      <div><h2>热门讨论</h2></div>
      <div>
        <div class="taoluntie" v-for="(article, index) in LookArticlesList.slice(2,5) ">
          <div class="taolun">
            <h2 @click="gotoarticle(article.aid)">{{article.title}}</h2>
            <p class="name" style="margin: 8px 0 13px;">
              <i class="iconfont icontouxiang"></i>&nbsp;{{article.specialist.specialistName}}&nbsp;&nbsp;分类：{{article.area.area}}&nbsp;&nbsp;发布时间：{{article.releaseDateStr}}
            </p>
            <p style="line-height: 1.5" @click="gotoarticle(article.aid)">{{article.description}}</p>
          </div>
          <div style="width:18%;overflow: hidden;">
            <img :src="article.image" style="width: 100%"/>
          </div>
        </div>
      </div>

      <div><h2>笔记精选</h2></div>
      <div>
        <div style="float: left;width: 72%">
          <div class="biji" v-for="(article, index) in LookArticlesList.slice(5,8) ">
            <h2 @click="gotoarticle(article.aid)">{{article.title}}</h2>
            <p class="name" style="margin: 8px 0 13px;">
              <i class="iconfont icontouxiang"></i>&nbsp;{{article.specialist.specialistName}}&nbsp;&nbsp;分类：{{article.area.area}}&nbsp;&nbsp;发布时间：{{article.releaseDateStr}}
            </p>
            <p style="line-height: 1.5" @click="gotoarticle(article.aid)">{{article.description}}</p>
          </div>
        </div>
        <div style="float: right;width: 26%;margin-top: 10px;">
          <div class="biji_right" v-for="(article, index) in LookArticlesList.slice(8,10) ">
            <h2 @click="gotoarticle(article.aid)">{{article.title}}</h2>
            <p class="name" style="margin: 8px 0 13px;">
              <i class="iconfont icontouxiang"></i>&nbsp;{{article.specialist.specialistName}}&nbsp;&nbsp;分类：{{article.area.area}}&nbsp;&nbsp;发布时间：{{article.releaseDateStr}}
            </p>
            <p style="line-height: 1.5" @click="gotoarticle(article.aid)">{{article.description}}</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "Look",
    data () {
      return{
        LookArticlesList: []
      }
    },
    mounted () {
      this.$http({
        url: '/article/looklook',
        method: 'post'
      }).then(res => {
        console.log(res.data);
        this.LookArticlesList = res.data
      }).catch(err => {})
    },
    methods: {
      gotoarticle(aid) {
        this.$router.push('/article/'+aid)
      }
    }
  }
</script>

<style scoped>
  #look{
    margin: 10px auto;
    width: 1200px;
  }
  .tiezi{
    float: right;
    border: black solid 1px;
    width: 100%;
    padding: 10px;
    margin-bottom: 18px;
    background-color: #ffffff;
  }
  .tiezi h2,.tiezi p,.taolun h2,.taolun p,.biji h2,.biji p,.biji_right h2,.biji_right p{
    margin: 0;
  }
  .tiezi h2,.taolun h2,.biji h2,.biji_right h2{
    color: #358685;
  }
  .name{
    margin: 8px 0 13px;
    color: #868d95;
  }
  .taolun{
    width: 79%;
    float: left;
    padding: 10px;
    margin-right: 14px;
  }
  .taoluntie{
    border: black solid 1px;
    margin: 15px 0;
    background-color: #ffffff;
  }
  .biji{
    float: left;
    padding: 10px;
    border: black solid 1px;
    margin: 10px 0;
    width: 100%;
    background-color: #ffffff;
  }
  .biji_right{
    float: right;
    padding: 10px;
    border: black solid 1px;
    margin-bottom: 20px;
    background-color: #ffffff;
  }
</style>
